<template>
  <div class="bg-f2">
    <ping :ping="ping" @guanbi="pingguanbi($event)"></ping>
    <el-card class="bg-f2 bg-fff">
      <ul class="addMargin" style="padding-bottom: 15px">
        <li>
          <div class="select">
            <span style="margin-right: 5px">网络状态:</span>
            <el-select v-model.trim="unitList2" clearable placeholder="请选择">
              <el-option label="正常" value="0"></el-option>
              <el-option label="异常" value="1"></el-option>
            </el-select>
          </div>
        </li>
        <li>
          <div class="select">
            <!-- <span style="margin-right: 5px">名称:</span> -->
            <el-input clearable v-model.trim="unitList" placeholder="请输入IP" class="input_name"></el-input>
          </div>
        </li>
        <li>
          <el-button type="primary" class="max_btn2 btnSizeStyle" @click="searchBtn()">查询</el-button>
        </li>
      </ul>
      <el-table
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        ref="multipleTable"
        :data="roleList"
        stripe
        border
        highlight-current-row
        style="width: 100%"
        :default-sort="{ prop: 'CJSJ', order: 'descending' }"
        v-loading="tableLoad"
        @sort-change="sortthiscolumn"
      >
        <!-- 提示语句 -->
        <template slot="empty">{{ tableMessage }}</template>
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column prop="ip" label="IP地址"></el-table-column>
        <el-table-column prop="gldk" label="管理端口"></el-table-column>
        <el-table-column prop="dlzh" label="管理账号"></el-table-column>
        <el-table-column prop="dlmm" label="密码"></el-table-column>
        <el-table-column prop="sn" label="设备序列码"></el-table-column>
        <!-- <el-table-column prop="xq" label="辖区编码"></el-table-column> -->
        <el-table-column prop="cjsj" label="创建时间" sortable>
          <template slot-scope="scope">{{ scope.row.cjsj | dateFormat }}</template>
        </el-table-column>
        <el-table-column prop="jcsj" label="检测时间" sortable>
          <template slot-scope="scope">{{ scope.row.jcsj | dateFormat }}</template>
        </el-table-column>
        <el-table-column label="网络状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="Number(scope.row.zxzt) === 0 ? '网络正常' : '网络异常'" placement="top-start">
              <svg class="iconfont wlzt" aria-hidden="true" style="width: 20px; height: 20px">
                <use :xlink:href="`#${Number(scope.row.zxzt) === 0 ? 'el-icon-myLAN_network' : 'el-icon-myLAN_Nonetwork'}`" style="font-size: 50px" />
              </svg>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="IoT网络" placement="top-start">
              <svg class="iconfont wlzt" aria-hidden="true" style="width: 20px; height: 20px; margin-left: 10px">
                <use xlink:href="#el-icon-myIoT_Nonetwork" style="font-size: 50px" />
              </svg>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="right">
          <template slot-scope="scope">
            <el-button type="text" :disabled="scope.row.ip !== '' && scope.row.ip !== null ? false : true" class="Btn_nan" @click="showPingOk(scope.row)">ping</el-button>
            <span class="operation"></span>
            <el-button type="text" @click="deteleRole(scope.row)" v-preventReClick>资产登记</el-button>
            <el-tooltip class="item" effect="dark" content="NVR检测到未登记的设备" placement="top-end">
              <i class="el-icon-warning-outline tiIcon"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageFloat">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import { ziC } from '../../utils/allUrl.js'
// import { endLoading } from '../../utils/loading.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import Ping from '@/components/ping/index.vue'
export default {
  data: function () {
    return {
      ping: {
        name: '', // ping设备名称
        speedOpen: false, // ping框
        ip: '',
      },
      currentPage: 1,
      pageSize: 10,
      roleList: [],
      unitList: '',
      unitList2: '',
      roleList2: [
        {
          IP: '192.168.1.1',
          GLDK: 12345,
          DLZH: 'admins',
          DLMM: 123456,
          CJSJ: 132132132132132,
        },
      ],
      total: 0,
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      listQuery: {
        sortby: '',
        order: '',
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.roleList = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
  },
  created: function () {
    this.getList()
    if (this.$route.params) {
      this.unitList2 = this.$route.params.wlzt
      this.unitList = this.$route.params.value
    }
  },
  components: { Ping },
  methods: {
    // ping
    showPingOk(val) {
      this.ping.speedOpen = true
      this.ping.ip = val.ip
      this.ping.name = val.ip
    },
    // ping组件
    pingguanbi(val) {
      this.ping = {
        speedOpen: val.type,
        name: '', // ping设备名称
        ip: '',
      }
    },
    searchBtn() {
      this.currentPage = 1
      this.pageSize = 10
      this.getList()
    },
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.getList()
    },
    // 获取数据
    async getList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      if (this.unitList) {
        params.append('IPMH', this.unitList)
      }
      if (this.unitList2) {
        params.append('ZXZT', this.unitList2)
      }
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      this.setList(params)
      // const { data: res } = await this.$http.post(`${ziC}wrkzc/list`, params)
      // // clearTimeout(a)
      // // endLoading()
      // if (res.code === '0014') {
      //   return ''
      // } else if (res.code === '0013') {
      //   this.total = 0
      //   return (this.rolelist = [])
      // } else if (res.code !== '0000') {
      //   return this.$message({
      //     type: 'error',
      //     message: res.message,
      //     center: true,
      //   })
      // }
      // this.roleList = res.data.list
      // this.total = res.data.countList
    },
    async setList(params) {
      const { data: res } = await this.$http.post(`${ziC}wrkzc/list`, params)
      switch (res.code) {
        case '0000':
          this.roleList = res.data.list
          this.total = res.data.countList
          break
        default:
          this.roleList = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    handleSizeChange(newsize) {
      this.currentPage = 1
      this.pageSize = newsize
      this.getList()
    },
    handleCurrentChange(newChange) {
      this.currentPage = newChange
      this.getList()
    },

    // 删除
    deteleRole(scope) {
      // console.log(scope)
      this.$router.push({
        name: 'Addproperty', // 路由
        query: {
          // 传递参数
          title: '添加资产',
          type: 1, // 1-新增  2-修改
          zclx: 5, // 摄像机
          ips: scope.ip,
          gldk: scope.gldk,
          dlzh: scope.dlzh,
          dlmm: scope.dlmm,
          sn: scope.sn,
          xq: scope.xq,
          url: 'notStock',
          wlzt: this.unitList2,
          value: this.unitList,
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.addMargin {
  height: 35px;
  line-height: 35px;
  display: flex;
  align-items: center;
  > li:first-child {
    margin-left: 0;
  }
  > li {
    margin-left: 10px;
    .select {
      display: flex;
      .input_name {
        width: 250px;
      }
    }
  }
}
// .addMargin {
//   height: 55px;
//   line-height: 67px;
// }
.operation {
  display: inline-block;
  margin: 0 5px;
  height: 10px;
  border-left: 1.5px solid #b3b3b3;
}
.usersNumber {
  color: rgba(46, 146, 247, 1);
}
.el-card {
  // margin-top: 15px;
  border-radius: 0;
  .tiIcon {
    font-size: 14px;
    margin-left: 5px;
    cursor: pointer;
  }
}
.pageFloat {
  display: flex;
  justify-content: flex-end;
  border-top: none;
  border: 1px solid #eaeaea;
  border-top: 0;
  align-items: center;
  height: 48px;
}
</style>
